<template>
  <div>
    <el-row :gutter="20">
        <el-col :span="12">
            <div class="card cardleft">


                <el-carousel height="370px">
                  <el-carousel-item v-for="(item,index) in lbtarr" :key="index">
                    <div class="zmd">
                        <img :src="item" alt="轮播图">
                    </div>
                  </el-carousel-item>
                </el-carousel>


            </div>
        </el-col>
        <el-col :span="12">
            <div class="card cardright">
                <div class="rightcontent">

                
                    <el-row>

                        <el-col :span="24">
                            <div class="cdcontent cttitle">生产基地信息</div>
                        </el-col>

                        <el-col :span="24">

                            <div class="cdcontent">
                                <el-row>
                                    <el-col :span="1">
                                        <svg t="1754155398972" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7736" width="30" height="40"><path d="M923.63904 424.82944c0-231.85792-184.29568-419.80544-411.64416-419.80544-227.34208 0-411.63904 187.94752-411.63904 419.80544 0 7.35872 0.7104 14.47168 1.08288 21.67552-0.33792 3.5584-1.08288 6.99008-1.08288 10.64192 0 258.38592 379.97952 551.06688 379.97952 551.06688s31.66336 24.21504 63.328 0c31.66336-24.24192 379.97952-292.68096 379.97952-551.06688 0-3.65184-0.74496-7.08352-1.08288-10.64192C922.92864 439.30112 923.63904 432.18816 923.63904 424.82944L923.63904 424.82944zM511.99488 586.336c-87.44832 0-158.31936-72.29312-158.31936-161.50656 0-89.15072 70.86976-161.4464 158.31936-161.4464 87.45344 0 158.32832 72.29568 158.32832 161.4464C670.3232 514.04288 599.44832 586.336 511.99488 586.336L511.99488 586.336zM511.99488 586.336" fill="#2e7d32" p-id="7737"></path></svg>
                                    </el-col>
                                    <el-col :span="23">
                                        <div class="msg_div" style="margin-left: 10px;">
                                            <div class="addressname"> {{ productionBaseInfo.areaName || '阳光农场' }}</div>
                                            <div class="address"> {{ productionBaseInfo.areaAddress || '山东省临沂市沂水县' }}</div>
                                        </div>
                                    </el-col>
                                </el-row>
                            </div>
                        </el-col>

                        <el-col :span="24">
                            <div class="cdcontent">
                                <el-row>
                                    <el-col :span="12">
                                        <div class="msg_div">
                                            <div class="areaname">种植面积</div>
                                            <div class="area">{{ productionBaseInfo.areaAcreage || '200' }}亩</div>
                                        </div>
                                    </el-col>
                                    <el-col :span="12">
                                        <div class="msg_div">
                                            <div class="yieldname">年产量</div>
                                            <div class="yield">{{ productionBaseInfo.annualYield || '150 吨' }}</div>
                                        </div>
                                    </el-col>
                                </el-row>
                            </div>
                        </el-col>

                        <el-col :span="24">
                            <div class="cdcontent">
                                <el-row>
                                    <el-col :span="12">
                                        <div class="msg_div">
                                            <div class="timename">成立时间</div>
                                            <div class="time">{{ productionBaseInfo.createTime || '2010年' }}</div>
                                        </div>
                                    </el-col>
                                    <el-col :span="12">
                                        <div class="msg_div">
                                            <div class="gradename">负责人</div>
                                            <div class="grade">{{ productionBaseInfo.responsiblePerson || 'AA级' }}</div>
                                        </div>
                                    </el-col>
                                </el-row>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </div>
        </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
import { useRoute } from 'vue-router'
import { getProduct } from '@/api/ncpsy/management/product';
import { getArea } from '@/api/ncpsy/management/area';

const route = useRoute()
const productionBaseInfo = ref({})

// 默认轮播图数组
const defaultImages = [
  new URL("@/assets/ncpsy/chandi1.png", import.meta.url).href,
  new URL("@/assets/ncpsy/chandi2.png", import.meta.url).href,
  new URL("@/assets/ncpsy/chandi3.png", import.meta.url).href,
  new URL("@/assets/ncpsy/chandi4.png", import.meta.url).href,
]

// 轮播图数组
const lbtarr = ref([...defaultImages])

// 处理areaImage字段的函数
const processAreaImages = (areaImage) => {
  if (!areaImage) {
    return [...defaultImages]
  }
  
  // 如果areaImage是字符串，尝试按逗号分割
  if (typeof areaImage === 'string') {
    const imageUrls = areaImage.split(',').filter(url => url.trim())
    if (imageUrls.length > 0) {
      return imageUrls
    }
  }
  
  // 如果areaImage是数组
  if (Array.isArray(areaImage) && areaImage.length > 0) {
    return areaImage
  }
  
  // 其他情况返回默认图片
  return [...defaultImages]
}

// 监听productionBaseInfo的变化，更新轮播图
watch(productionBaseInfo, (newVal) => {
  if (newVal && newVal.areaImage) {
    lbtarr.value = processAreaImages(newVal.areaImage)
  } else {
    lbtarr.value = [...defaultImages]
  }
}, { deep: true })

onMounted(() => {
  // 从路由参数获取产品ID
  const productId = route.query.id
  const cropId = route.query.cropId
  if (cropId) {
    // 通过ID查询生产基地数据
    getProduct(cropId).then(res => {
      productionBaseInfo.value = res.data
      console.log('获取到的生产基地数据:', productionBaseInfo.value.areaId)
        getArea(productionBaseInfo.value.areaId).then(res => {
            productionBaseInfo.value = res.data
            console.log('获取到的区域数据:', productionBaseInfo.value)
            // 更新轮播图
            if (productionBaseInfo.value.areaImage) {
              lbtarr.value = processAreaImages(productionBaseInfo.value.areaImage)
            }
        })
    }).catch(error => {
      console.error('获取生产基地数据失败:', error)
      // 如果获取失败，使用默认数据
      productionBaseInfo.value = {
        baseName: '阳光农场',
        address: '山东省临沂市沂水县',
        area: '200 亩',
        annualYield: '150 吨',
        establishedYear: '2010年',
        certificationLevel: 'AA级'
      }
    })
  } else {
    // 如果没有ID，使用默认数据
    productionBaseInfo.value = {
      baseName: '阳光农场',
      address: '山东省临沂市沂水县',
      area: '200 亩',
      annualYield: '150 吨',
      establishedYear: '2010年',
      certificationLevel: 'AA级'
    }
  }
})

</script>

<style scoped>
.card{
    height: 370px;
    border-radius: 20px;

}
.cardleft{
    overflow: hidden;
}
.cardleft img{
    height: 370px;
    width: 100%;
    object-fit: cover;
}
.zmd{
    width: 100%;
    height: 100%;
}
.zmd img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.cardright{
    background-color: #ffffff;
    box-shadow: rgba(100, 99, 99, 0.733) 1px 1px 10px;
    text-align: left;
}
.rightcontent{
    height: 370px;
    padding: 30px;
}
.cdcontent{
    margin: 15px 0;
}
.msg_div{
    overflow: hidden;
}
.cttitle{
    font-size: 28px;
    font-weight: 500;
}
.addressname{
    font-size: 20px;
    font-weight: 500;
}
.address{
    font-size: 19px;
    color: gray;
}
.grade,.time,.yield,.area{
    font-size: 20px;
    font-weight: 700;
}
.gradename,.timename,.yieldname,.areaname{
    font-size: 19px;
    font-weight: 500;
    color: gray;
}
</style>